<script setup lang="ts">
import { ref, nextTick } from 'vue'
import * as echarts from 'echarts'
import { EChartsType } from 'echarts'
import { Warning, CaretTop, UserFilled, CircleCheckFilled, List, Briefcase } from '@element-plus/icons-vue'
import { initMerchantOpts } from './rank-echart'
import { initMapOpts } from './map-echart'
import useUtils from '@/utils';
const { index } = useDashboard()
const { userCounts, merchantRanks, userAmount,
  userUnActAmount, categoryCount, discountCount,
  merchantAmount, fmerchantCount, merchantLocations } = await index()
let userOpt = initMerchantOpts(userCounts)
let merchantOpt = initMerchantOpts(merchantRanks, "name")
let mapOpt = initMapOpts(merchantLocations)
// 定义3个图形的实例
let echart1: EChartsType | null = null;
let echart2: EChartsType | null = null;
let dazhou: EChartsType | null = null;

nextTick(() => {
  if (!echart1 && !echart2 && !dazhou) {
    setTimeout(() => {
      let el1 = document.getElementById('echart1')
      let el2 = document.getElementById('echart2')
      let el3 = document.getElementById('dazhou')
      if (el1) {
        echarts.init(el1 as HTMLDivElement).setOption(userOpt)
      }
      if (el2) {
        echarts.init(el2 as HTMLDivElement).setOption(merchantOpt)
      }
      if (el3) {
        echarts.init(el3 as HTMLDivElement).setOption(mapOpt)
      }
    }, 500)
  }
})

</script>

<template>
  <div>
    <!-- 地图 -->
    <div class="grap">
      <!-- 上下间隔10 -->

      <el-row :gutter="24">
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div>
                会员
              </div>
            </template>
            <template #default>
              <div>
                <el-statistic :value="userAmount">
                  <template #title>
                    <div style="display: inline-flex; align-items: center">
                      explain
                      <el-tooltip effect="dark" content="包含未支付会员费的用户" placement="top">
                        <el-icon style="margin-left: 4px;color:blue" :size="48">
                          <UserFilled />
                        </el-icon>
                      </el-tooltip>
                    </div>
                  </template>
                </el-statistic>
                <div class="statistic-footer">
                  <div class="footer-item">
                    <span class="text-sm">未支付会员</span>

                    <span class="green">
                      {{ userUnActAmount }}
                    </span>

                  </div>
                </div>
              </div>
            </template>
          </el-card>

        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div>
                商家
              </div>
            </template>
            <template #default>
              <div>
                <el-statistic :value="merchantAmount">
                  <template #title>
                    <div style="display: inline-flex; align-items: center">
                      信息
                      <el-tooltip effect="dark" content="包含所有平台商家" placement="top">
                        <el-icon style="margin-left: 4px;color:teal" :size="48">
                          <CircleCheckFilled />
                        </el-icon>
                      </el-tooltip>
                    </div>
                  </template>
                </el-statistic>
                <div class="statistic-footer">
                  <div class="footer-item">
                    <span class="text-sm">禁用商家</span>
                    <span class="green">
                      {{ fmerchantCount }}
                      <el-icon>
                        <CaretTop />
                      </el-icon>
                    </span>
                  </div>
                </div>
              </div>
            </template>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div>
                优惠种类
              </div>
            </template>
            <template #default>
              <div>
                <el-statistic :value="discountCount">
                  <template #title>
                    <div style="display: inline-flex; align-items: center">
                      信息
                      <el-tooltip effect="dark" content="系统配置的活动种类" placement="top">
                        <el-icon style="margin-left: 4px;color:brown" :size="48">
                          <List />
                        </el-icon>
                      </el-tooltip>
                    </div>
                  </template>
                </el-statistic>
                <div class="statistic-footer">
                  <div class="footer-item">
                    <span></span>
                    <span class="green">
                      <el-icon>
                      </el-icon>
                    </span>
                  </div>
                </div>
              </div>
            </template>
          </el-card>

        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div>
                行业覆盖
              </div>
            </template>
            <template #default>
              <div>
                <el-statistic :value="categoryCount">
                  <template #title>
                    <div style="display: inline-flex; align-items: center">
                      信息
                      <el-tooltip effect="dark" content="有多少行业加入了本系统" placement="top">
                        <el-icon style="margin-left: 4px;color: goldenrod;" :size="48">
                          <Briefcase />
                        </el-icon>
                      </el-tooltip>
                    </div>
                  </template>
                </el-statistic>
                <div class="statistic-footer">
                  <div class="footer-item">
                    <span></span>
                    <span class="green">
                      <el-icon>
                      </el-icon>
                    </span>
                  </div>
                </div>
              </div>
            </template>
          </el-card>
        </el-col>

      </el-row>
    </div>




    <div class="grap">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="never">
            <template #header>
              <div>
                商家分布
              </div>
            </template>
            <div id="dazhou" style="height:680px;width:100%"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="never">
            <template #header>
              会员入网
            </template>
            <div id="echart1" class="h-72"></div>
          </el-card>
          <el-card shadow="never">
            <template #header>
              <div>
                商家浏览人气
              </div>
            </template>
            <div id="echart2" class="h-72"></div>
          </el-card>
        </el-col>

      </el-row>
    </div>


  </div>
</template>
<style lang="scss">
.grap {
  margin: 10px;
}
</style>